<template>
	<div class="account">
		<view class="account-list">
			<view class="li">
				<h3>头像</h3>
				<div>
					<img @click="setImg" :src="datainfo.face?datainfo.face:(userInfos.face?userInfos.face:'../../static/face.jpg')"/>
					<i class='hd-icon'>&#xe601;</i>
				</div>
			</view>
			<view class="li" @click="navigateTo('realname',datainfo.realname)">
				<h3>真实姓名</h3>
                <div>
                    <span>{{datainfo.realname}}</span>
                    <i class='hd-icon'>&#xe601;</i>
                </div>
			</view>
			<view class="li" @click="navigateTo('sex',datainfo.sex)">
				<h3>性别</h3>
				<div>
					<span>{{datainfo.sex}}</span>
					<i class='hd-icon'>&#xe601;</i>
				</div>
			</view>
			<view class="li" @click="navigateTo('birthday',datainfo.birthday)">
				<h3>出生日期</h3>
				<div>
                    <span>{{datainfo.birthday}}</span>
                    <i class='hd-icon'>&#xe601;</i>
                </div>
			</view>
			<view class="li" @click="navigateTo('qq',datainfo.qq)">
				<h3>QQ号码</h3>
				<div>
                    <span>{{datainfo.qq}}</span>
                    <i class='hd-icon'>&#xe601;</i>
                </div>
			</view>
			<!-- <li @click="navigateTo('password')">
				<h3>修改密码</h3>
				<i class='hd-icon'>&#xe601;</i>
			</li> -->
		</view>
		<view style="padding:30rpx;">
			<button @click="loginOut" type="primary" class="grace-button">退出登录</button>
		</view>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import fab from '@/components/fab';
    import { userInfo,getAuth,logout,clearAuth,saveUserInfo } from '@/api/user';
	export default{
		data(){
			return{
				userImg:'/static/deldeimg/p1.jpg',
				isTopBtn:false,
                datainfo:'',
                openImg:false
			}
		},
		components:{
			fab
		},
        computed:{
        	userInfos(){
        		return getAuth();
        	}
        },
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
        onShow(){
            if(!this.openImg){
                userInfo(this.userInfos.username).then((res)=>{
                    if(res.data.status==1){
                        this.datainfo =res.data.datas;
                    }
                })
            }
        },
		methods:{
            loginOut(){
                uni.showModal({
                	title: '确认提醒',
                	content: '您确定要退出登录吗？',
                	success:(e)=>{
                		if (e.confirm) {
                			logout(this.userInfos.username).then((res)=>{
                			    if(res.data.status==1){
                                    clearAuth();
                                    uni.redirectTo({
                                        url: './index'
                                    }); 
                                }
                			})
                		}
                	}
                });
            },
			setImg(){
                this.openImg=true;
				uni.chooseImage({
				    count: 1, 
				    success: (res)=>{
						this.datainfo.face = res.tempFilePaths[0];
                        uni.uploadFile({
                            url: 'http://m.haiav.com/index.php?m=api&c=wxapp&a=saveUserInfo', //仅为示例，非真实的接口地址
                            filePath: this.datainfo.face,
                            name: 'face',
                            header:{
                                'Cookie':`PHPSESSID=${this.userInfos.session_id}`
                            },
                            formData: {
                                'field':'face',
                                'username':this.userInfos.username
                            },
                            success: (uploadFileRes) => {
                                this.openImg=false;
                            }
                        });
                        /* saveUserInfo(upData).then((res)=>{
                            if(res.data.status==1){
                                this.openImg=false;
                            }
                        }) */
				    }
				});
			},
			navigateTo(t,f){
                this.openImg=false;
				uni.navigateTo({
				    url: './editAccount?type='+t+'&data='+f
				});
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			}
		}
	}
</script>

<style lang="scss">
	.account-list{
		background: #fff;
		.li{
			width:710rpx;
			margin:0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom:1px solid #eee;
			padding:30rpx 0;
			&:nth-last-of-type(1){
				border:none;
			}
			h3{
				font-size:28rpx;
				color:#343434;
			}
			div{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				span{
					margin-right:20rpx;
					font-size:28rpx;
					color:#343434;
				}
			}
			img{
				width:100rpx;
				height:100rpx;
				border-radius:50%;
				margin-right:20rpx;
			}
		}
	}
	.grace-button{
		background: #fd8197 !important;
		color:#fff !important;
		font-size:28rpx !important;
		border:none !important;
		padding:10rpx 0;
		&:after{
			border:none !important;
		}
	}
</style>
